<template>
  <div class="edit-reagent-board hc-page">
    <div class="edit-reagent-board-query"></div>
    <div class="edit-reagent-board-content">
      <div class="regent-board-list">
        <p class="board-title">试剂板</p>
        <div class="board-operation"></div>
        <div class="table-warpper">
          <HcTable :data="[]" :showPagination="false" :showTableheader="false" border stripe>
            <template #btns>
              <div class="operation"></div>
            </template>
            <template #query>
              <div class="edit-reagent-board-query"></div>
            </template>
            <el-table-column prop="试剂" label="试剂" />
            <el-table-column prop="位点" label="位点" />
          </HcTable>
        </div>
      </div>
      <div class="reagent-board-detail">
        <HcTab :tabs="tabs" default-tab="table" background="#545A5D" choosedColor="#545A5D" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HcTab from "/@/components/hc-tab/index.vue";
import HcTable from "/@/components/hc-table/index.vue";
import ReagentTable from "./components/edit-reagent-boadr-table.vue";

const tabs = [
  {
    label: "板孔",
    name: "hole",
    component: "",
  },
  {
    label: "列表",
    name: "table",
    component: ReagentTable,
  },
];
</script>

<style lang="scss" scoped>
.edit-reagent-board {
  .edit-reagent-board-query {
    height: 4.285714rem /* 60/14 */;
  }

  .edit-reagent-board-content {
    height: calc(100% - 4.285714rem /* 60/14 */);
    display: flex;
    border: 1px sloid #282d2d;
    .regent-board-list {
      width: 28.571429rem /* 400/14 */;
      position: relative;
      .board-title {
        height: 2.857143rem /* 40/14 */;
      }
      .board-operation {
        height: 2.857143rem /* 40/14 */;
      }

      .table-warpper {
        height: calc(100% - 5.714286rem /* 80/14 */);
      }
    }
    .reagent-board-detail {
      background-color: #374246;
      flex: 1;
    }
  }
}
</style>
